<!--  
 +---------------------------------------------------------------------- 
 | 狂团[kt8.cn]旗下KtAdmin是为独立版SAAS系统而生的快速开发框架. 
 +---------------------------------------------------------------------- 
 | [KtAdmin] Copyright (c) 2022 http://ktadmin.cn All rights reserved. 
 +---------------------------------------------------------------------- 
 | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) 
 +----------------------------------------------------------------------  
--> 

<script setup>
import { reactive, ref } from 'vue'
import { Siteobtain, setbackground,postwxgzh,postsavewxgzh,postRandstr } from '@/api'
import bottomCopyringht from '../../../components/bottom-copyright.vue'
import { ElMessage } from 'element-plus';
const token = ref(JSON.parse(localStorage.agenttoken).data)
const formSize = ref('default')
const ruleFormRef = ref()
const imageUrl = ref('')
const form1 = reactive({
	"appid":"",
	"appsecret":"",
	"token":"",
	"message_key":"",
	"message_mode":2,
	"type":1,
	original_id:""
})
const ruleFormRef1 = ref()
const list = ref([
	{
		id:1,
		'name':'登录设置'
	},

	{
		id:2,
		'name':'公众号设置'
	}
])
const ruleForm = reactive({
	name: 'Hello',
	radio1: '2'
})
const handleAvatarSuccess = (response, uploadFile) => {
	console.log(response, uploadFile)
	imageUrl.value = response.data
}
// 获取数据
const getList = () => {
	Siteobtain().then((res) => {
		ruleForm.radio1 = res.data.login_background_status
		if (res.data.login_background_status == 2) {
			imageUrl.value = res.data.login_background
		}
	})
}
getList()
const rules = reactive({
	name: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	]
})
const submitForm1 = () => {
	if (ruleForm.radio1 == 1) {
		setbackground({
			loginBackgroundStatus: 1,
			loginBackground: 'http://weidogstest.oss-cn-beijing.aliyuncs.com/949c6004e2ceb22f5fde1f650befa0fa.png'
		}).then((res) => {
			ElMessage({ message: '保存成功', type: 'success' })
		})
	} else {
		setbackground({ loginBackgroundStatus: 2, loginBackground: imageUrl.value }).then((res) => {
			ElMessage({ message: '保存成功', type: 'success' })
		})
	}
}
const submitForm2 = async() => {
	const r = await postsavewxgzh(form1)
	if(r){
		ElMessage.success('保存成功')
		getGzh()
	}
}
const getGzh = async()=>{
	const r = await postwxgzh()
	if(r){
		Object.assign(form1,r.data)
	}
}
getGzh()
const copy = (val) => {
	setClipboard(
	val
	)
}
const rand = async(val) => {
	let len = 18
	if(val==2){
		len = 43
	}
	const r = await postRandstr(len)
	if (r){
		if(val==1) form1.token = r.data
		else form1.message_key = r.data
		
	}
    
}
const beforeAvatarUpload = (rawFile) => {
	console.log(rawFile.type)
	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
		ElMessage.error('上传格式必须为.jpg,.png,.gif格式!')
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!')
		return false
	}
	return true
}
const currentId = ref(1)
const change = (item)=>{
	currentId.value = item.id
}
</script>
<template>

		<div class="topTabStyle">
			<div class="tabStyleChild" style="width:180px">
				<div :class="{ tabSelect: item.id === currentId }" v-for="(item, index) in list" @click="change(item)">
					{{ item.name }}
				</div>
			</div>
		<div class="cardContent" style="margin:14px 0;padding: 24px 14px;">
			<div v-if="currentId==1" class="">
				<el-form
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					label-width="120px"
					class="demo-ruleForm"
					:size="formSize"
					status-icon
				>
					<el-form-item label="登录页背景图" prop="name">
						<el-radio-group v-model="ruleForm.radio1" class="ml-4">
							<el-radio label="1">默认背景</el-radio>
							<el-radio label="2">自定义</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="ruleForm.radio1 == 2">
						<el-upload
							class="avatar-uploader"
							action="/base/admin/system/media/upload"
							:headers="{ UserToken: token }"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload"
						>
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</el-form-item>
					<el-form-item v-if="ruleForm.radio1 == 1">
						<el-image
							style="width: 400px; height: 206px; margin-bottom: 15px"
							src="http://weidogstest.oss-cn-beijing.aliyuncs.com/949c6004e2ceb22f5fde1f650befa0fa.png"
							:fit="fit"
						/>
					</el-form-item>
					<div style="margin-left: 120px; color: #999999" v-if="ruleForm.radio1 == 2">建议尺寸:1920*980</div>
				</el-form>
			</div>
			<div v-if="currentId==2">
				<el-form  label-width="140px" >
				<el-form-item label="开关 " prop="">
							<div>
								<el-switch
							v-model="form1.switch"
							class="ml-2"
							style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
							:active-value="1"
							:inactive-value="0"
						/>
								<span class="office-text" style="margin-left:10px;">开启后登录注册页显示微信登录入口</span>	
							</div>
							
						
                        
								
                        </el-form-item>
					</el-form>
			<el-form ref="ruleFormRef1" :model="form1" label-width="140px" style="margin-top: 0px">
				
				<el-form-item label="Appid " prop="domain">
							<div class="office-left">
								<el-input class="office-inp" v-model="form1.appid" placeholder="请输入" />
							<span class="office-text">微信公众平台appid</span>	
							</div>
                           
                        </el-form-item>
                        <el-form-item label="AppSecret " prop="domain">
							<div class="office-left">
								<el-input class="office-inp" v-model="form1.appsecret" placeholder="请输入" />
							<span class="office-text">微信公众平台appsecret</span>	
							</div>
                        
								
                        </el-form-item>

						<el-form-item label="公众号原始id " prop="domain">
							<div class="office-left">
								<el-input class="office-inp" v-model="form1.original_id" placeholder="请输入" />
							<span class="office-text">微信公众平台原始id</span>	
							</div>
                        
								
                        </el-form-item>
						
                       
                        <el-form-item label="令牌(Token) " prop="domain">
							<div class="s-flex-l">
                                <el-input style="width: 300px;" v-model="form1.token" placeholder="请输入" />
								<el-button style="margin-left: 16px;" type="primary" @click="copy(form1.token)">复制</el-button>
                                <el-button type="primary" @click="rand(1)">随机</el-button>
                               
                            </div>
							<div class="office-tip">可随机生成，需与公众平台配置一致</div>
								
								
							
						</el-form-item>
                        <el-form-item label="消息加解密Key " prop="domain">
							<div class="s-flex-l">
                                <el-input  style="width: 300px;" v-model="form1.message_key" placeholder="请输入" />
								<el-button style="margin-left: 16px;" type="primary" @click="copy(form1.message_key)">复制</el-button>
                                <el-button type="primary" @click="rand(2)">随机</el-button>
                               
                            </div>
							<div class="office-tip">可随机生成，需与公众平台配置一致</div>
								
							
						</el-form-item>

                        <el-form-item label="消息加密模式 " prop="domain">
						
								
                        <div>
							<el-radio-group v-model="form1.message_mode">
								<el-radio :label="1">
									明文模式
							</el-radio>
							<el-radio :label="2">
								兼容模式
							</el-radio>
							<el-radio :label="3">
								安全模式
							</el-radio>
							</el-radio-group>
                          
                        </div>
                
                    
                </el-form-item>
                <el-form-item label="服务器地址 " prop="domain">
							<div class="s-flex-l">
                                <el-input style="width:300px" disabled v-model="form1.callback_url" placeholder="" />
								<el-button style="margin-left: 16px;" type="primary" @click="copy(form1.callback_url)">复制</el-button>
                            
                            </div>
								
							
						</el-form-item>
						<!-- <el-form-item label="类型 " prop="domain">
							<el-radio-group v-model="form1.type">
								<el-radio :label="1">
								手动
							</el-radio>
							<el-radio :label="2">
								扫码
							</el-radio>
							</el-radio-group>
							
								
							
						</el-form-item> -->
						
					</el-form>
				</div>
		</div>
		<div class="bottomButton">
			<el-button v-if="currentId==1" type="primary" @click="submitForm1()">保存</el-button>
			<el-button v-else-if="currentId==2" type="primary" @click="submitForm2">保存</el-button>
		
		</div>
	</div>
	<bottom-copyringht style="margin-bottom: 80px"></bottom-copyringht>
</template>
<style scoped>
.bottomButton {
	position: fixed;
	bottom: 0;
	width: 100%;
	line-height: 60px;
	text-align: center;
	padding-right: 100px;
	height: 60px;

	background-color: #ffffff;
}
.cardContent {
	background: #ffffff;
	margin: 20px;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	min-height: 600px;
}
.avatar-uploader .avatar {
	width: 400px;
	height: 204px;
	display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 110px !important;
	height: 110px !important;
	text-align: center;
}
.topTabStyle {
	position: relative;
	height: 65px;
	margin: 20px;
	background: #ffffff;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 15px;
}

.tabStyleChild {
	width: 280px;
	height: 65px;
	line-height: 65px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
	margin-left: 40px;
	display: flex;
	justify-content: space-between;
}

.tabSelect {
	text-align: center;
	color: #208eff;
	border-bottom: 2px solid #208eff;
}
.office-left{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.office-inp{
		width: 300px;
	}
	.office-text{
		white-space: nowrap;
		color: #999;
		font-size: 14px;
		margin-left: 16px;
	}
	.office-tip{
		font-size: 12px;
		color: #999;
	}
</style>
